<template>
  <div class="robot-item mask">
    <div class="bottom-line pb10 row tac">
      <div class="col3 flex flex-vcenter flex-hcenter">ID:{{ id }}</div>
      <div class="col5">
        <input class="name" type="text" v-model="name" />
      </div>
      <!-- <div class="col5 flex flex-vcenter flex-hcenter">类型：{{ type }}</div> -->
      <div class="col5 flex flex-vcenter flex-hcenter">
        类型：
        <select v-model="type">
          <option value="1">空</option>
          <option value="2">陆</option>
          <option value="3">海</option>
        </select> 
      </div>
      <div class="col5 flex flex-vcenter flex-hcenter">
        母舰：
        <input type="checkbox" v-model="isParent"/>
      </div>
      <div class="col5 tal">
        <Button type="primary" @click="saveRobot" >修改</Button>
        <Button type="danger">删除</Button>
      </div>
    </div>
    <div class="row pt10">
      <div class="col8 pd10 flex flex-d-c">
        <div class="row flex-hcenter flex-vcenter sprite pb10">
          <span>缩略图：</span>
          <img :src="sprite" alt @click="toChangeSprite"/>
        </div>
        <div class="row pt10 pb10 big top-line bottom-line">
          <img :src="bigSprite" class="mask" alt  @click="toChangeBigSprite"/>
        </div>
        <div class="row pt10 note">
          <textarea class="pd10" v-model="note" placeholder="机体备注"></textarea>
        </div>
      </div>
      <div class="col16 attrs left-line">
        <div class="row">
          <div class="col8 right-line">
            <h4 class="tac">基础属性</h4>
            <AttrItem
              class="top-line"
              v-for="(val,key) in baseAttr"
              :key="key"
              v-model="baseAttr[key]"
              :type="key"
            />
          </div>
          <div class="col8 right-line">
            <h4 class="tac">属性成长</h4>
            <AttrItem
              class="top-line"
              v-for="(val,key) in growAttr"
              :key="key"
              v-model="growAttr[key]"
              :type="key"
            />
          </div>
          <div class="col8">
            <h4 class="tac">击杀奖励</h4>
            <AttrItem
              class="top-line"
              v-for="(val,key) in reward"
              :key="key"
              v-model="reward[key]"
              :type="key"
            />
          </div>
        </div>
        <div class="row top-line">
          <div class="col6 flex flex-vcenter flex-hcenter right-line">装备武器</div>
          <div class="col18 weapons flex pd10" @click="weaponsClick">
            <div class="weapon-item" v-for="item in weaponList" :key="item">
              <span class="name">{{item.name}}</span>
              <img :src="item.sprite" alt />
            </div>
          </div>
        </div>
        <div class="row top-line">
          <div class="col6 flex flex-vcenter flex-hcenter right-line">变形机体</div>
          <div class="col18 exchanges flex pd10" @click="exchangeClick">
            <div class="rb-item" v-for="item in exchangeList" :key="item.id">
              <span class="name">{{ item.name }}</span>
              <img :src="item.bigSprite" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Button from '../../common/Button.vue'
import AttrItem from '../../manager/people/AttrItem.vue'
import axios from '../../../lib/request.js'
import { reactive, toRefs } from 'vue'
export default {
  emits: ['changeWeapon','changeExchange','changeSprite','changeBigSprite'],
  components: { Button, AttrItem },
  props: ['data'],
  setup(props, context) {
    const state = reactive({
      ...props.data
    })

    const weaponsClick = () => {
      context.emit('changeWeapon', state)
    }
    const exchangeClick = ()=>{
      context.emit('changeExchange', state)
    }

    const toChangeBigSprite = ()=>{
      context.emit('changeBigSprite',state)
    }

    const toChangeSprite = ()=>{
      context.emit('changeSprite',state)
    }

    const saveRobot = ()=>{
      state.type = parseInt(state.type)
      const data = {...state}
      delete data.weaponList
      delete data.exchangeList
      console.log(state);
      axios.post('/robots/saveRobot',{data})
    }

    return {
      ...toRefs(state),
      weaponsClick,exchangeClick,toChangeBigSprite,toChangeSprite,saveRobot
    }
  },
}
</script>
<style lang="less" scoped>
@import "../../../theme.less";
.robot-item {
  border: 1px solid @theme-line;
  border-radius: 4px;
  padding: 10px;
  h4 {
    font-size: 16px;
  }
  .name {
    width: 100%;
  }
  .note {
    flex: 1;
  }
  .big {
    min-height: 50px;
  }
  .sprite {
    img {
      width: 40px;
    }
  }
  .attrs {
    color: @theme-line;
  }
  .attr-item {
    width: 100%;
  }
  .weapons,
  .exchanges {
    min-height: 50px;
    cursor: pointer;
  }
  .weapon-item,
  .rb-item {
    border: 1px solid @theme-line;
    border-radius: 4px;
    margin-right: 4px;
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .name {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: @theme-line;
      // font-size: 12px;
      text-align: center;
      text-shadow: 0 0 4px #000;
    }
    img {
      max-width: 40px;
    }
  }
}
</style>